<template>
  <el-menu style="height:100%" default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
    <el-menu-item index="1">
      <el-icon>
        <House />
      </el-icon>

      <span>首页</span>
    </el-menu-item>
    <el-sub-menu index="2" @open="handleOpen">
      <template #title>
        <span>好友</span>
      </template>
      <el-sub-menu index="2-1">
        <template #title>
          <el-icon>
            <User />
          </el-icon>
          好友 {{ onlineFriends.length }}/{{ friends.length }}
        </template>
        <el-menu-item @click="GoToChatWithFriend(friend)" v-for="friend in friends" :key="friend.userId"
          index="2-1-1">
          <span>{{ friend.username }}</span>
          <el-tag v-if="friend.isOnline" type="success" style="margin-left: 10px;">在线</el-tag>
          <el-tag v-else type="info" style="margin-left: 10px;">离线</el-tag> </el-menu-item>
      </el-sub-menu>
      <el-menu-item @click="router.push('/addFriend')">
        <template #title>
          <span>添加好友</span>
        </template>
      </el-menu-item>
      <el-menu-item @click="router.push('/accptedFriends')">
        <template #title>
          <span>接受好友列表</span>
        </template>
      </el-menu-item>
    </el-sub-menu>

    <el-menu-item index="3">
      <span>系统设置</span>
    </el-menu-item>
  </el-menu>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import router from "@/router";
import { getFriends, getOnlineFriendList } from "@/service/user/friendShipService";
import { ElMessage } from 'element-plus';
import { fi } from 'element-plus/es/locale';
const userId = localStorage.getItem("userId");
// 好友列表
const friends: any = ref([]);
// 在线好友列表
const onlineFriends: any = ref([]);
const handleOpen: any = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
  switch (key) {
    case '1':
      router.push("/dashBoard");
      break;
    case '2-1':
      getAllFriends();
      break;
    case '2-2':
      router.push("/addFriends");
      break;
    case "3":
      router.push("/updateUserInfo")
      break;
  }
};
onMounted(() => {
  // 页面渲染时获取所有好友和在线好友
  getAllFriends();
});
const GoToChatWithFriend = (friend:any) => {

  console.log(friend)
  // 携带id跳转至聊天页面
  router.push({
    path: "/chatWithFriend",
    query: {
      friendShipId: friend.friendShipId,
      friendId:friend.userId
    }
  })
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
// 获取所有在线好友
const getAllFriends = async () => {
  if (userId) {
    try {
      const response = await getFriends(parseInt(userId));
      friends.value = response.data;
      // 获取在线好友列表
      getOnlineFriendList(parseInt(userId)).then(res => {
        // 更新 friends 数组中的 isOnline 属性
        console.log("onlineFriends", res);
        friends.value.forEach((friend: any) => {
          friend.isOnline = res.some((onlineFriend: any) => onlineFriend.userId === friend.userId);

        });
        onlineFriends.value = res;
      })

    } catch (error) {
      ElMessage.error("Failed to retrieve friends. Please try again.");
    }
  } else {
    ElMessage.error("Please log in again.");
    router.push("/login");
  }
};
// 获取在线服务
const getOnlineFriends = async () => {
  if (userId) {
    try {
      const response = await getOnlineFriendList(parseInt(userId));
      console.log(response);
      onlineFriends.value = response.data;
    } catch (error) {
      ElMessage.error("获取好友失败");
    }
  }
}
</script>
